<template>
  <div id="app">
    <div class="navs">
      <el-menu mode="horizontal" router :default-active="currentPath">
        <div class="menu-wrapper">
          <div class="logo-item">
            <al-logo />
          </div>
          <div class="menu-item">
            <el-menu-item v-for="i in sid_1" :key="i.id" :index="i.path">{{
              i.meta.title
            }}</el-menu-item>
          </div>
          <div class="user-item">
            <el-menu-item v-for="i in sid_2" :key="i.id" :index="i.path">{{
              i.meta.title
            }}</el-menu-item>
          </div>
        </div>
      </el-menu>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _t from './App.js'
import Logo from '@/components/common/Logo.vue'
export default {
  name: 'APP',
  components: { 'al-logo': Logo },
  data() {
    return {
      list: _t.users
    }
  },
  computed: {
    ...mapState('common', ['isCollapse', 'currentPath'])
  },
  created() {
    const routes = this.$router.options.routes
    this.sid_1 = routes.filter((val) => val.meta.sid === 1)
    this.sid_2 = routes.filter((val) => val.meta.sid === 2)
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100vh;
  background-color: $bgColor;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .navs {
    flex: 0 0 auto;
    width: 100%;
    .el-menu {
      width: 100%;
      .menu-wrapper {
        width: 1280px;
        display: flex;
        margin: 0 auto;
        .logo-item {
          flex: 0 0 16%;
        }
        .menu-item {
          flex: 1;
          display: flex;
        }
        .user-item {
          flex: 0 0 30%;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
  .content {
    width: 1280px;
    margin: 0 auto;
    flex: 1;
  }
}
</style>
